<template>
  <el-card class="box-card">
    <div class="data-set">
      <p class="title">新建数据集</p>
      <div class="form">
        <el-form
            label-position="left"
            :model="dataSet"
            label-width="120px"
        >
          <el-form-item label="项目名称">
            <el-input v-model="dataSet.projectName" placeholder="项目名称"/>
          </el-form-item>
          <el-form-item label="数据集来源">
            <el-select v-model="dataSet.datasetSource" placeholder="数据集来源">
              <el-option label="自采" value="自采" />
              <el-option label="公共" value="公共" />
            </el-select>
          </el-form-item>
          <el-form-item label="标注需求类别">
            <el-input v-model="dataSet.annotationStyle" placeholder="标注需求类别"/>
          </el-form-item>
          <el-form-item label="图像压缩包">
            <input type="file" name="avatar" accept=".zip,.rar" multiple required ref="imageZip">
          </el-form-item>
          <el-form-item label="标注文件压缩包">
            <input type="file" name="avatar" accept=".zip,.rar" multiple required ref="markZip">
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">新建项目</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {reactive, ref} from "vue";
import { ElMessage } from 'element-plus';
import {uploadDataSet} from "../api/api";

let dataSet = reactive({
  projectName: '',
  annotationStyle: '',
  datasetSource: '',
})

let imageZip = ref(null);
let markZip = ref(null);

function onSubmit(){
  let formdata = new FormData();
  formdata.append('imageZip', imageZip.value.files[0]);
  formdata.append('markZip', markZip.value.files[0]);
  dataSet.imageZip = imageZip.value.files[0];
  dataSet.markZip = markZip.value.files[0];
  for (let i in dataSet){
    formdata.append(i, dataSet[i]);
  }
  //表单完整性检测
  for(let i in dataSet){
    if(!dataSet[i]){
      ElMessage({
        message: '数据集信息未填写完整！',
        type: 'warning',
      })
      return;
    }
  }
  if(formdata.get('imageZip') === 'undefined' || formdata.get('markZip') === 'undefined'){
      ElMessage({
        message: '未上传压缩文件！',
        type: 'warning',
      })
      return;
  }
  //提交表单到服务器
  uploadDataSet(formdata).then(res=>{
    ElMessage({
      message: '上传成功！',
      type: 'success',
    })
  }).catch(error=>{
    console.log(error)
    ElMessage({
      message: '上传失败！',
      type: 'error',
    })
  })
}
</script>

<style scoped>
.title{
  font-size: 20px;
  font-weight: 600;
}
.form{
  width: 500px;
}
::v-deep .el-select{
  width: 100%;
}
</style>
